<template>
  <div>
    <div class="my-2.5 flex">
      <a-button
        type="primary"
        class="mr-2.5"
        @click="chunkPhoto"
        v-if="showBtn"
        :disabled="btnDisabled"
      >
        抓取照片
      </a-button>
      <a-button
        type="primary"
        class="mr-2.5"
        @click="backToVideo"
        v-if="!showVideo && showBtn"
      >
        切换回视频
      </a-button>
    </div>
    <div class="video-cont" v-if="showVideo">
      <video
        class="w-11/12 h-48 mb-4"
        id="single-video1"
        controls
        autoplay
        autobuffer
        muted
        preload="auto"
      >
      </video>
      <video
        class="w-11/12 h-48 mb-4"
        id="single-video2"
        controls
        autoplay
        autobuffer
        muted
        preload="auto"
      >
      </video>
    </div>
    <div class="image-cont" v-if="!showVideo">
      <img
        class="w-11/12 h-48 mb-4"
        :src="`data:image/jpg;base64,${image1}`"
        alt=""
      />
      <img
        class="w-11/12 h-48 mb-4"
        :src="`data:image/jpg;base64,${image2}`"
        alt=""
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, defineEmits, defineProps, defineExpose, onUnmounted } from "vue"
  import request from "@/config/request"
  import { message } from "ant-design-vue"

  const requestUrl = ref('http://127.0.0.1:9607')
  const webRtcServer1 = ref(null)
  const webRtcServer2 = ref(null)
  const image1 = ref()
  const image2 = ref()
  const msgKey = ref('photo')
  const showVideo = ref<boolean>(true)
  const btnDisabled = ref<boolean>(false)
  const emit = defineEmits(['getPhoto'])
  const prop = defineProps({
    showBtn: {
      type: Boolean,
      default: true
    }
  })
  /*defineExpose({
    showVideo
  })*/

  const getFirstVideo = () => {
    request.post(`${requestUrl.value}/cam/rtsp/url`, {
      ip: '192.168.0.137',
      port: 554,
      chan: 1,
      manufacturer: 1,
      userName: 'admin',
      passWord: 'uic@62826768'
    }).then(res => {
      webRtcServer1.value = new WebRtcStreamer('single-video1', 'http://127.0.0.1:9698')
      let rtspUrl = res.data.data
      let option = "rtptransport=tcp"
      webRtcServer1.value.connect(rtspUrl, null, option, null)
    })
  }

  const getSecondVideo = () => {
    request.post(`${requestUrl.value}/cam/rtsp/url`, {
      ip: '192.168.0.137',
      port: 554,
      chan: 1,
      manufacturer: 1,
      userName: 'admin',
      passWord: 'uic@62826768'
    }).then(res => {
      webRtcServer2.value = new WebRtcStreamer('single-video2', 'http://127.0.0.1:9698')
      let rtspUrl = res.data.data
      let option = "rtptransport=tcp"
      webRtcServer2.value.connect(rtspUrl, null, option, null)
    })
  }

  const chunkPhoto = () => {
    btnDisabled.value = true
    const hide = message.loading({
      content: '抓取中，请稍后...',
      key: msgKey.value,
      duration: 0
    })
    request.post(`${requestUrl.value}/cam/ht/cut/pic`, {
      ip: '192.168.0.137',
      port: 554,
      chan: 1,
      manufacturer: 1,
      userName: 'admin',
      passWord: 'uic@62826768'
    }).then(res => {
      // if(res.data.code == 200) emit('getPhoto', res.data.data)
      btnDisabled.value = false
      hide()
      if(res.data.code == 200) {
        message.success('抓取成功')
        image1.value = res.data.data
        image2.value = res.data.data
        showVideo.value = false
      }
    })
  }

  const backToVideo = () => {
    getFirstVideo()
    getSecondVideo()
    showVideo.value = true
  }

  onMounted(() => {
    getFirstVideo()
    getSecondVideo()
  })

  onUnmounted(() => {
    webRtcServer1.value = null
    webRtcServer2.value = null
  })

</script>

<style scoped lang="less">

</style>
